<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./动物选项卡1/宠物选项卡.css">
</head>
<body>
    <ul>
        <li class="active">哈士奇</li>
        <li>边牧</li>
        <li>柴犬</li>
        <li>萨摩耶</li>
        <li>阿拉斯加</li>
    </ul>
    <ol>
        <li class="dog"><img src="./动物选项卡1/images/哈士奇.jpg" alt=""></li>
        <li><img src="./动物选项卡1/images/边牧.jpg" alt=""></li>
        <li><img src="./动物选项卡1/images/柴犬.jpg" alt=""></li>
        <li><img src="./动物选项卡1/images/萨摩耶.jpg" alt=""></li>
        <li><img src="./动物选项卡1/images/阿拉斯加.jpg" alt=""></li>
    </ol>
    <script>
        var ulis = document.querySelectorAll('ul li')
        var olis = document.querySelectorAll('ol li')
        for(var i = 0; i < ulis.length; i++){
            ulis[i].dataset.num = i
            ulis[i].onmouseover = function(){
                for(var k = 0; k < olis.length; k++){
                    ulis[k].classList.remove('active')
                    olis[k].classList.remove('dog')
                }
                this.classList.add('active')
                var a = this.dataset.num;
                olis[a].classList.add('dog')
            }
        }

    </script>
</body>
</html>